<template>
    <div class="swiper">
        <swiper
            indicator-dots
            indicator-color='#EA5A49'
            autoplay
            interval='6000'
            duration='1000'
            circular
        >
            <div v-for="(top,imgindex) in imgUrls" :key="imgindex">
                <swiper-item>
                    <image 
                        class="slide-image" 
                        :src="img.image" 
                        v-for="img in top"
                        :key="img.id"
                        mode="aspectFit"
                        @click="bookDetail(img)"
                    />
                </swiper-item>
            </div>
        </swiper>
    </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data () {
      return {

      }
    },
    props: ['tops'],
    components: {},
    computed: {
      imgUrls () {
        let res = this.tops
        return [res.slice(0, 3), res.slice(3, 6), res.slice(6)]
      }
    },
    methods: {
      bookDetail (item) {
        wx.navigateTo({
          url: '/pages/detail/main?id=' + item.id
        })
      }
    }
  }
</script>

<style scoped lang="scss">
.swiper {
    margin-top: 5px;
    .slide-image {
        width: 33%;
        height: 250rpx;
    }
}
</style>
